<template>
	<view class="p">
		<view class="container">
			<u-avatar :src="src" shape="square" class="tou"></u-avatar>卓么了是我
			<!-- <u-search shape="square" class="sousuo"></u-search> -->

			<view style="width:45%;margin-left:20px">
				<u-search :showAction="true" actionText="搜索" :animation="true" style="width: 100%"></u-search>
			</view>
			<u-icon name="share-square" size="30px" style="margin-left:25px"></u-icon>
		</view>
		<u-notice-bar :text="text1"></u-notice-bar>
		<u-swiper :list="imgslist" indicator indicatorMode="line" circular height="210px"></u-swiper>


		<swiper :indicator-dots="true" :autoplay="false" style="height: 360rpx;">
			<!-- 每页显示10个分类（5个×2行） -->
			<swiper-item v-for="(page, pageIndex) in Math.ceil(categorylist.length / 10)" :key="pageIndex">
				<u-grid :border="false" col="5" row="2" class="Fen">
					<!-- 当前页的分类项（最多10个） -->
					<u-grid-item
						v-for="(listItem, listIndex) in categorylist.slice(pageIndex * 10, (pageIndex + 1) * 10)"
						:key="listIndex">
						<u-avatar :src="baseUrl+'/'+listItem.cimg"></u-avatar>
						<text class="grid-text">{{listItem.cname}}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>
		<u-toast ref="uToast" />

		<!-- 图片宫格 -->
		<u-scroll-list>
			<view v-for="(item, index) in list" :key="index">
				<image :src="item.thumb" style="width: 130px; height: 130px;"></image>
			</view>
		</u-scroll-list>

		<u-tabs :list="categorynames" @click="click" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
			          color: '#303133',
			          fontWeight: 'bold',
			          transform: 'scale(1.05)'
			      }" :inactiveStyle="{
			          color: '#606266',
			          transform: 'scale(1)'
			      }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
		</u-tabs>
		<!-- <view>
			<view class="f2" v-for="item in showGoodsList" @click="toDetail(item)">
				<span class="s3">
					<strong style="color: black">{{item.note}}</strong>
					<strong>{{item.detailtitle}}</strong>|{{item.unit}}
				</span>
				<view class="f3">
					<img :src="baseUrl+'/'+item.gimg.split(',')[0]">
					<img :src="baseUrl+'/'+item.gimg.split(',')[1]">
					<img :src="baseUrl+'/'+item.gimg.split(',')[2]">
				</view>
				<span class="s4">{{item.description}}</span>
				<view class="s5">
					<view>到货时间:{{item.sendtime}}</view>
					<view>已售 <span style="color: red;">{{item.salednum}}</span> / 仅剩{{item.stock}} </view>
				</view>
				<view class="f4">
					<view class="f5">
						<span class="s6">&yen; {{item.saleprice}}</span>
						<span class="s8">&yen;{{item.price}}</span>
					</view>
					<view class="s7">
						到货提醒
					</view>
				</view>
			</view>

			<u-loadmore :status="status"></u-loadmore>
		</view> -->
		<!-- 兰芝产品区 -->
		<view class="product-grid">
			<view class="product-section" v-for="item in showGoodsList" @click="toDetail(item)">
				<view class="product-info">
					<image class="product-image" :src="baseUrl+'/'+item.gimg.split(',')[0]" mode="aspectFill"></image>
				</view>
				<view class="price-container">
					<text class="current-price">&yen; {{item.saleprice}}</text>
					<text class="original-price">618狂欢价&yen;{{item.price}}</text>
				</view>

				<view class="product-brand">
					<text class="brand-name">{{item.detailtitle}}</strong>|{{item.unit}}</text>
					<text class="brand-name"></text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'

	import {
		getBanners
	} from '@/api/banners'
	import {
		getCategory
	} from '@/api/category'
	import {
		getGoods
	} from '@/api/goods'
	import {
		API_BASE_URL
	} from '@/utils/appConfig'
	export default {
		data() {
			return {
				list: [{
						thumb: "/static/image/gtimg/1.webp.jpg",
					},
					{
						thumb: "/static/image/gtimg/2.jpg",
					},
					{
						thumb: "/static/image/gtimg/3.jpg",
					},
					{
						thumb: "/static/image/gtimg/4.jpg",
					},
					{
						thumb: "/static/image/gtimg/5.jfif",
					},
					{
						thumb: "/static/image/gtimg/6.jfif",
					},
					{
						thumb: "/static/image/gtimg/7.jfif",
					},
					{
						thumb: "/static/image/gtimg/8.jfif",
					},
					{
						thumb: "/static/image/gtimg/9.webp.jpg",
					},
					{
						thumb: "/static/image/gtimg/10.webp.jpg",
					},
					{
						thumb: "/static/image/gtimg/11.webp.jpg",
					},
					{
						thumb: "/static/image/gtimg/12.webp.jpg",
					},
				],


				keyword: "请输入关键字",
				imgslist: [],
				categorylist: [],
				goodsList: [],
				query: {
					publishstate: 1,
					cid: null
				},
				status: 'loadmore',
				showGoodsList: [],
				start: 0,
				end: 3,
				baseUrl: API_BASE_URL,
				categorynames: [],
				text1: '这是一家由文卓赟创始人打造的一家专属19年HellokKitty老店，欢迎同学们的光临，请多多选购吧！',
				src: "/static/image/hellokitty.jpg",
			}
		},
		computed: {
			...mapState(['total'])
		},
		watch: {
			//     // 监听total变化
			total(newVal) {
				this.setTabBarBadge(newVal)
			}
		},
		methods: {
			...mapActions(['changeCartTotal']),
			// 设置角标方法
			setTabBarBadge(count) {
				uni.setTabBarBadge({
					index: 2,
					text: String(count > 0 ? count : '') // 0时不显示
				})
			},

			getBannerData() {
				getBanners().then(res => {
					console.log(res.data);
					res.data.rows.forEach(item => {
						this.imgslist.push(API_BASE_URL + "/" + item.bannerimg);
					})
					this.imgslist.forEach(a => {
						console.log(a)
					})
				})
			},
			getcategorylist() {
				this.categorynames.length = 0;
				getCategory({
					isshow: 1
				}).then(res => {
					console.log(res.data.rows);
					this.categorylist = res.data.rows;
					this.categorynames.push({
						name: '全部',
						id: null
					});
					this.categorylist.forEach(item => {
						this.categorynames.push({
							name: item.cname,
							id: item.cid
						});
					})
				})
			},
			getGoodsData() {
				getGoods(this.query).then(res => {
					this.showGoodsList = []
					console.log(res.data);
					this.goodsList = res.data;
					// if(this.end>=this.goodsList.length){
					// 	this.end = this.goodsList.length;
					// 	this.showGoodsList.length = this.goodsList.length;
					// 	this.status = "nomore"   //没有更多了
					// }
					this.showGoodsList = this.goodsList.slice(this.start, this.end);
				})
			},
			toDetail(item) {
				console.log(item.gid);
				uni.$u.route('pages/detail/detail', {
					id: item.gid
				})
			},
			click(item) {
				this.start = 0;
				this.end = 5;
				this.showGoodsList = []
				this.query.cid = item.id;
				console.log(this.query.cid);
				this.goodsList = []; //初始化
				this.getGoodsData();
				this.$refs.uToast.success(`点击了第${item.id}个`)
			},
			onReachBottom() {
				console.log("上拉到底")
				if (this.showGoodsList.length >= this.goodsList.length) {
					this.status = "nomore";
					return
				};
				this.status = 'loading';
				setTimeout(() => {
					this.start += 3;
					this.end += 3;
					this.showGoodsList = this.showGoodsList.concat(this.goodsList.slice(this.start, this.end));
					console.log(this.showGoodsList.length)
				}, 200)
			}
		},
		onLoad() {
			this.changeCartTotal();
			this.getBannerData();
			this.getcategorylist();
			this.getGoodsData();
			uni.setTabBarBadge({
				index: 2, //tabBar项索引(从0开始)
				text: String(count) //必须转换为字符串格式
				// text:String(count)   //必须转换为字符串格式
			});
		}
	}
</script>

<style>
	.swiper {
		height: 720rpx;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	.Fen {
		margin-top: 1px;
		background-color: antiquewhite;

	}

	.container {
		display: flex;
		align-items: center;
		padding: 10px;
		width: 100%;
		/* 添加以下属性防止内容溢出 */
		overflow: hidden;


	}

	.p {
		min-height: 100vh;
		/* 确保渐变覆盖整个屏幕 */
		background: linear-gradient(to right, pink, white);
	}




	.f2 {
		width: 100%;
		height: 350rpx;
		display: flex;
		flex-direction: column;
		margin: 10rpx auto;
		padding: 0rpx;
		box-shadow: 0rpx 0rpx 5rpx 5rpx #fff;
		background-color: beige;
	}

	.s3 {
		text-decoration: none;
		display: -webkit-box;
		width: 100%;
		word-wrap: break-word;
		overflow: hidden;
		/*隐藏*/
		text-overflow: ellipsis;
		/*...*/
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		color: red;
		font-size: 17px;
	}

	.f3 img {
		width: 33%;
		//width: 125rpx;
		height: 120rpx;
		padding: 3px;
	}

	.f3 {
		width: 100%;
		height: 125rpx;
		display: flex;
		margin: 2px;
		padding: 1px;
	}

	.s4 {
		font-size: 20rpx;
		color: rgb(173, 170, 170);
		text-decoration: none;
		display: -webkit-box;
		width: 100%;
		word-wrap: break-word;
		overflow: hidden;
		/*隐藏*/
		text-overflow: ellipsis;
		/*...*/
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.s5 {
		display: flex;
		justify-content: space-between;
	}

	.f4 {
		width: 100%;
		height: 50rpx;
		display: flex;
		justify-content: space-between;
	}

	.f5 {
		width: 50%;
	}

	.s6 {
		width: 100rpx;
		color: red;
		font-size: 20px;
	}

	.s7 {
		width: 160rpx;
		height: 30rpx;
		border: 2px solid green;
		border-radius: 20rpx;
		color: green;
		line-height: 30rpx;
		text-align: center;

	}

	.s8 {
		color: #ccc;
		text-decoration: line-through;
		font-size: 14px
	}

	.container {
		padding: 0;
		background-color: #f8f8f8;
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
		background-color: #fff;
	}

	.nav-left,
	.nav-right {
		display: flex;
		align-items: center;
	}

	.live-icon,
	.live-icon-small {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.promotion-tag {
		background-color: #ff4d4f;
		color: white;
		border-radius: 4px;
		padding: 1px 5px;
		font-size: 12px;
		margin-right: 5px;
	}

	.product-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		padding: 0 5px;
	}

	.product-section {
		background: linear-gradient(to right, pink, white);
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.product-header {
		display: flex;
		align-items: center;
		padding: 8px 10px;
	}

	.product-banner {
		width: 100%;
		height: 180px;
	}

	.product-image {
		width: 100%;
		height: 180px;
	}

	.product-info {
		padding: 0 10px 10px;
	}

	.brand-name {
		font-size: 22px;
		font-weight: bold;
		color: #333;
		display: block;
	}

	.brand-desc {
		font-size: 14px;
		color: #666;
		display: block;
		margin-top: 2px;
	}

	.product-slogan {
		font-size: 16px;
		color: #333;
		margin-top: 5px;
	}

	.product-history {
		font-size: 12px;
		color: #999;
		margin-top: 3px;
	}

	.promo-badge {
		position: absolute;
		top: 10px;
		right: 10px;
		background-color: rgba(255, 77, 79, 0.9);
		border-radius: 10px;
		padding: 3px 8px;
		display: flex;
		align-items: center;
	}

	.badge-label {
		color: white;
		font-size: 12px;
	}

	.brand-tags {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.brand-logo {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.discount {
		color: #ffc107;
		font-size: 24px;
		font-weight: bold;
	}

	.price-container {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.current-price {
		color: #ff4d4f;
		font-size: 18px;
		font-weight: bold;
	}

	.original-price {
		color: #999;
		font-size: 12px;
		margin-left: 5px;
		text-decoration: line-through;
	}

	.hot-tag {
		display: inline-block;
		background-color: #ff4d4f;
		color: white;
		font-size: 12px;
		padding: 2px 6px;
		border-radius: 2px;
		margin-top: 5px;
	}

	.product-new {
		text-align: center;
		color: #52c41a;
		font-size: 14px;
		margin-top: 5px;
	}
</style>